<template>
  <div class="comment">
    <div class="topClose" @click="_handleShowComment"></div>
    <div class="userInfo" @click="_handleShowComment">
      <div class="userName">{{descriptionComment.raindrop}}</div>
      <div class="commentNum">
        {{isComment > 99 ? '99+' : isComment }}
      </div>
      <div class="description">{{descriptionComment.descriptionInfo}}</div>
      <div class="commentBox" v-if='commentList.catch_num > 0'>
        <ul class="commenAvatar">
          <li
            v-for="(item,index) in commentList.caughtList"
            :class="`avatar${index}`"
            :style="{backgroundImage:`url(${item.avatar})`}"
          >
          </li>
        </ul>
        <span class="textNum">
          {{catch_num > 99 ? '99+' : catch_num }}
        </span>
      </div>
    </div>
    <div class="commentNumText" v-if=false>Comment {{isComment }}</div>
    <div class="page-loadmore-wrapper" ref="wrapper">
      <!--:top-method="loadTop"-->
      <!--@top-status-change="handleTopChange"-->
      <mt-loadmore
        v-if='commentList.list && commentList.list.length > 0'
        :auto-fill=false
        @translate-change="translateChange"
        :bottom-method="loadBottom"
        @bottom-status-change="handleBottomChange"
        ref="loadmore">

        <comment-item v-for="(item,index) in commentList.list" :key='index' :comment="item"/>
      </mt-loadmore>
      <no-content
        v-if='commentList.list && commentList.list.length == 0'
        content='No Comment'
        imgIcon='nocomment'/>
    </div>

  </div>
</template>

<script>
  import { mapGetters, mapActions } from 'Vuex'
  import NoContent from '../../components/common/NoContent'
  import CommentItem from './CommentItem'
  import api from '../../plugins/api'
  import { Toast } from 'mint-ui'

  const Cookie = process.browser ? require('js-cookie') : undefined

  export default {
    components: { CommentItem, NoContent },

    data() {
      return {
        list: [],
        topStatus: '',
        bottomStatus: '',
        wrapperHeight: 0,
        translate: 0,
        moveTranslate: 0
      }
    },
    props: {
      descriptionComment: {
        type: Object,
        default() {
          return []
        }
      }
    },
    computed: {
      ...mapGetters([
        'isShowCommNum',
        'commentList'
      ]),
      isComment() {
        //返回评论数
        return this.descriptionComment.commentNum
      },
      catch_num() {
        return this.commentList.catch_num
      }
    },
    created() {
      // console.log(this.commentList)
    },
    methods: {
      ...mapActions({
        _handleShowComment: '_isShowComment'
      }),


      //上拉状态
      handleBottomChange(status) {
        this.bottomStatus = status
      },

      //上拉加载
      loadBottom() {
        setTimeout(() => {
          let lastValue = this.list[this.list.length - 1]
          if (lastValue < 40) {
            for (let i = 1; i <= 10; i++) {
              this.list.push(lastValue + i)
            }
          } else {
            // this.allLoaded = true
          }
          this.$refs.loadmore.onBottomLoaded()
        }, 1500)
      },

      // handleTopChange(status) {
      //   this.topStatus = status
      // },
      // loadTop() {
      //   console.log('tttt')
      // },
      translateChange(translate) {
        console.log(translate)
        // const translateNum = +translate
        // this.translate = translateNum.toFixed(2)
        // this.moveTranslate = (1 + translateNum / 70).toFixed(2)
      }
    }
    // watch: {
    //   commentList: function(curr,old) {
    //     console.log(curr)
    //   }
    // }

  }
</script>
<style scoped lang="scss">
  div {
    height: auto;
  }

  .comment {
    height: calc(100% - 112px);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #666666;
    font-size: 28px;
    overflow: hidden;

    .topClose {
      margin-top: 8px;
      width: 78px;
      height: 4px;
      border-radius: 2px;
      background: #BFC3C5;
    }

    .userInfo {
      height: auto;
      width: 100%;
      padding: 32px;
      border-bottom: 1px solid rgba(0, 0, 0, .1);

      .userName {
        font-size: 34px;
        font-weight: bold;
        line-height: 34px;
        color: #4B4B4B;
      }

      .commentNum {
        margin: 10px 0 26px 6px;
        width: 46px;
        height: 24px;
        line-height: 40px;
        padding-left: 22px;
        font-size: 20px;
        font-weight: 500;
        color: rgba(178, 184, 191, 1);
        position: relative;
        text-align: center;

        &:before {
          content: '';
          position: absolute;
          left: -5px;
          top: 10px;
          width: 20px;
          height: 20px;
          z-index: 4;
          background: url("../../assets/images/4.png") no-repeat center;
          -webkit-background-size: cover;
          background-size: cover;
        }
      }

      .commentBox {

        width: fit-content;
        height: 56px;
        background-color: #D2D7D9;
        border-radius: 40px;
        padding: 6px;
        margin: 24px 0 4px 0;
        box-sizing: content-box;
        display: flex;
        align-items: center;

        .commenAvatar {
          display: flex;
          align-items: center;

          li {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: url("") no-repeat center;
            -webkit-background-size: cover;
            background-size: cover;
            position: relative;
          }

          $width: (12px);
          $index: 10;
          @mixin left($width,$n) {
            left: -($width*$n);
            z-index: $index - $n;
          }
          @for $i from 0 through 2 {
            .avatar#{$i} {
              @include left($width, $i);
            }
          }
        }

        .textNum {
          width: 54px;
          font-size: 22px;
          text-align: center;
        }
      }
    }

    .commentNumText {
      margin-top: 24px;
      width: 100%;
      font-size: 24px;
      height: 24px;
      line-height: 24px;
      text-align: left;
      font-weight: bold;
      padding-left: 32px;
      color: rgba(178, 184, 191, 1);
    }

    .mint-loadmore {
      height: 100%;
    }

    .page-loadmore-wrapper {
      overflow: scroll;
      flex-grow: 1;
      width: 100%;
    }

    .mint-loadmore-bottom span {
      display: inline-block;
      -webkit-transition: .2s linear;
      transition: .2s linear;
      vertical-align: middle
    }

    .mint-loadmore-bottom span.is-rotate {
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg)

    }


  }
</style>
